<template>
  <el-dialog :title="title" :visible.sync="open" width="680px" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <fieldset>
        <legend>资产信息</legend>
        <el-row :gutter="20">
          <el-col :span="12" :xs="24">
            <el-form-item label="所属小区" prop="communityId">
              <el-select v-model="form.communityId" placeholder="请选择所属小区" @change="getBuildingData">
                <el-option
                  v-for="dict in communityOptions"
                  :key="dict.id"
                  :label="dict.communityName"
                  :value="dict.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-form-item label="所属楼栋" prop="floorId">
              <el-select v-model="form.floorId" placeholder="请选择所属楼栋" @change="getUnitList">
                <el-option
                  v-for="item in floorOptions"
                  :key="item.id"
                  :label="item.floorName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-form-item label="所属单元" prop="roomId">
              <el-select v-model="form.unitId" placeholder="请选择所属单元" @change="getRoomListData">
                <el-option
                  v-for="item in unitOptions"
                  :key="item.id"
                  :label="item.unitName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-form-item label="所属房屋" prop="roomId">
              <el-select v-model="roomIds" multiple collapse-tags placeholder="请选择所属房屋">
                <el-option
                  v-for="item in roomOptions"
                  :key="item.id"
                  :label="item.roomNum"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </fieldset>
      <fieldset>
        <legend>修改项</legend>
          <template v-for="(item,index) in form.updateForms">
            <el-row :gutter="20" style="margin-top: 10px;">
              <div style="margin-left: 30px;">
                <el-col :span="10" :xs="24">
                  <span class="title">元数据项：</span>
                  <el-select style="width: 100px;" @change="(v)=>fieldChange(v,index)" v-model="item.key" size="mini">
                    <el-option
                      v-for="dict in formColumns"
                      :key="dict.key"
                      :label="dict.name"
                      :value="dict.key"
                    />
                  </el-select>
                  <span class="title"> 修改为：</span>
                </el-col>
                <el-col :span="5">
                  <l-form-item
                    v-model="item.updateVal"
                    :type="item.type"
                    :typeCode="item.typeCode"
                    :placeholder="item.placeholder"
                  />
                </el-col>
                <el-col :span="4">
                         <span style="margin-left: 10px;">
                          <el-button type="primary" style="padding: 4px;" icon="el-icon-plus" circle
                                     @click="addModePayments(item,index)"></el-button>
                          <el-button type="danger" style="padding: 4px;" icon="el-icon-minus" circle v-if="index != 0"
                                     @click="minusModePayments(item,index)"></el-button>
                        </span>
                </el-col>
              </div>
            </el-row>
          </template>
      </fieldset>


    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm" v-hasPermi="['property:room:batchUpdateRoom']">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { batchUpdateRoom } from "@/api/property/room";
  import {roomMixin} from "./roomMixin.js"

  export default {
    mixins: [roomMixin],
    data() {
      return {
        open: false,
        title: '批量修改房屋信息',
        // 表单参数
        form: {},
        // 表单校验
        rules: {},
        formColumns: [
          {name: '住所户型', key: 'apartment', dataType: 'VARCHAR', type: 'select', typeCode: 'apartment', placeholder: ''},
          {name: '建筑面积', key: 'build_area', dataType: 'DECIMAL', type: '', typeCode: '', placeholder: ''},
          {name: '房屋面积', key: 'room_area', dataType: 'DECIMAL', type: '', typeCode: '', placeholder: ''},
          {name: '房屋属性', key: 'state', dataType: 'VARCHAR', type: 'select', typeCode: 'floor_state', placeholder: ''},
        ],
        roomIds:[]
      };
    },
    created() {

    },
    methods: {
      show(option) {
        this.reset();
        this.initHouseInfo(option.currentNode)
        this.open = true
      },
      // 取消按钮
      cancel() {
        this.reset();
        this.open = false
      },
      // 表单重置
      reset() {
        this.form = {
          communityId: null,
          floorId: null,
          roomId: null,
          unitId: null,
          updateForms: [this.getRules()]
        };

        this.resetForm("form");
      },
      fieldChange(v, index) {
        let index_0 = this.formColumns.findIndex(x => x.key == v)
        if (index_0 != -1) {
          this.form.updateForms[index].name = this.formColumns[index_0].name
          this.form.updateForms[index].key = this.formColumns[index_0].key
          this.form.updateForms[index].dataType = this.formColumns[index_0].dataType
          this.form.updateForms[index].type = this.formColumns[index_0].type
          this.form.updateForms[index].typeCode = this.formColumns[index_0].typeCode
          this.form.updateForms[index].placeholder = this.formColumns[index_0].placeholder
        }
      },
      addModePayments(row, index) {
        let rules = this.getRules()
        this.form.updateForms.push({...rules, ...{orderNum: this.form.updateForms.length}})
      },
      minusModePayments(row, index) {
        this.form.updateForms.splice(index, 1)
      },
      getRules() {
        return {
          name: null, //字典属性
          key: null, //字典属性
          updateVal: null,  //修改后的值
          dataType: null, //数据类型
          type: '',
          typeCode: '',
          placeholder: '',
          orderNum: 0
        }
      },
      /** 提交按钮 */
      submitForm() {
        if(this.form.updateForms.length > 0){
          for(let i in this.form.updateForms){
            let row = this.form.updateForms[i]
            if(!row.key){
              this.msgError(`批量修改第${row.orderNum+1}行元数据项不能为空。`)
              return;
            }else if(!row.updateVal){
              this.msgError(`批量修改第${row.orderNum+1}行修改后的值不能为空。`)
              return;
            }
          }
        }else{
          this.msgError("请选择修改项")
          return;
        }
        this.form.roomId = this.roomIds.join(",")
        batchUpdateRoom(this.form).then(response => {
          this.msgSuccess("批量修改房屋成功");
          this.open = false;
          this.$emit("ok")
        });
      }
    },
  };
</script>
